<template>
  <div class="app-container">

    <input v-model.number="center.lng">
    <input v-model.number="center.lat">
    <input v-model.number="zoom">
    <baidu-map class="bm-view" :scroll-wheel-zoom="true"
               :center="center"
               :zoom="zoom"
               @moving="syncCenterAndZoom"
               @moveend="syncCenterAndZoom"
               @zoomend="syncCenterAndZoom"
               @ready="handler">
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
    </baidu-map>
    <div>当前城市：{{ city }}</div>




    <el-divider>待处理业务</el-divider>

    <br />
    <el-table :data="transportList">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="货物编号" prop="cropsId" />
      <el-table-column label="通知人" prop="farmerNickName" />
      <el-table-column label="部门" prop="farmerDept" />
      <el-table-column label="时间" prop="time" />
      <el-table-column label="备注" prop="remarks" />
      <el-table-column label="状态" prop="status">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0">未运输</el-tag>
          <el-tag v-if="scope.row.status === 1">运输中</el-tag>
          <el-tag v-if="scope.row.status === 2">运输完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-show="scope.row.status === 0" size="mini" type="text" @click="startTransport(scope.row)">开始配送</el-button>
          <el-button v-show="scope.row.status === 1" size="mini" type="text" @click="transportLocation(scope.row)">中途定位</el-button>
          <el-button v-show="scope.row.status === 1" size="mini" type="text" @click="isOk(scope.row)">配送完毕</el-button>
          <!--					<el-button size="mini" type="text" @click="isOk(scope.row)">物流追踪</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <div v-show="false" id="tip"></div>
    <div v-show="false" id="lng"></div>
    <div v-show="false" id="lat"></div>
  </div>
</template>

<script>
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from '@/api/system/dept';
import {
  listTransport,
  saveAndUpdateTransportInfoToDb,
  saveGpsTable,
  updateTransportStatus
} from '../../../api/trace/driver';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import { formatDate } from '../../../utils/index.js';
import AMap from "postcss";
export default {
  name: 'Dept',
  components: { Treeselect },
  data() {
    return {
      center: {lng: 0, lat: 0},
      zoom: 3,
      noticeDetaiDialog: false,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 表格树数据
      deptList: [],
      // 部门树选项
      deptOptions: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 状态数据字典
      statusOptions: [],
      // 查询参数
      queryParams: {
        deptName: undefined,
        status: undefined
      },
      // 表单参数
      form: {},

      transportList: [],
      cityDetail: '',
      lng: Number,
      lat: Number,


      result: [],
      city:"",



    };
  },
  created() {
    this.getList();
  },

  methods: {

    syncCenterAndZoom (e) {
      const {lng, lat} = e.target.getCenter()
      this.center.lng = lng
      this.center.lat = lat
      this.zoom = e.target.getZoom()

      // 反向解析获取城市信息
      const geocoder = new BMap.Geocoder()
      geocoder.getLocation(new BMap.Point(lng, lat), result => {
        if (result) {
          // const { city } = result.addressComponents;
          /*
           * 为了简化代码，我们使用了 ES6 中的对象解构语法来提取出目标属性
           * 使用解构语法
           * const { city, district, street, streetNumber } = result.addressComponents
           * 把result.addressComponents对象中的city、district、street和streetNumber属性
           * 分别赋值给了city、district、street和streetNumber变量
           */
          const{city,district,street,streetNumber}=result.addressComponents;
          this.city = city+district +street+streetNumber;
          console.log(result)
        }
      })
    },
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15

    },
    isOk(row){
      const transportArray = [];
      const id = new this.$snowFlakeId().generate();
      transportArray.push(id);
      transportArray.push(id);
      transportArray.push(this.$store.getters.name);
      transportArray.push(this.$store.getters.nickName);
      transportArray.push(this.$store.getters.phonenumber);
      transportArray.push(this.$store.getters.deptName);
      transportArray.push(formatDate(new Date()));
      transportArray.push(this.city);
      transportArray.push(row.cropsId);
      transportArray.push('终点站');
      this.$confirm('是否确认配送完毕', '配送', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$httpBlock
            .post(this.$httpUrl + '/driverapi/createTransport', { transportArray: transportArray })
            .then(res => {
              if (res.status === 200) {
                this.msgSuccess('数据上链成功');
                this.growDialog = false;
                const transportInfo = {
                  lng: this.center.lng,
                  lat: this.center.lat,
                  cropsId: row.cropsId,
                  status: 2,
                  id: row.id,
                  outFactoryStatus:0
                };
                saveAndUpdateTransportInfoToDb(transportInfo)
                  .then(res => {
                    this.getList();
                  })
                  .catch(err => {

                  });
              }
            })
            .catch(err => {
              this.msgError('存储异常 ' + err);
            });
          this.$message({
            type: 'success',
            message: '配送成功!'
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消'
          });
        });
    },

    transportLocation(row) {
      const transportArray = [];
      const id = new this.$snowFlakeId().generate();
      transportArray.push(id);
      transportArray.push(id);
      transportArray.push(this.$store.getters.name);
      transportArray.push(this.$store.getters.nickName);
      transportArray.push(this.$store.getters.phonenumber);
      transportArray.push(this.$store.getters.deptName);
      transportArray.push(formatDate(new Date()));
      transportArray.push(this.city);
      transportArray.push(row.cropsId);
      transportArray.push('中途定位');
      this.$confirm(this.city, '定位', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$httpBlock
            .post(this.$httpUrl + '/driverapi/createTransport', { transportArray: transportArray })
            .then(res => {
              if (res.status === 200) {
                this.msgSuccess('数据上链成功');
                this.growDialog = false;
                const transportInfo = {
                  lng: this.center.lng,
                  lat: this.center.lat,
                  cropsId: row.cropsId,
                  status: 1,
                };
                saveAndUpdateTransportInfoToDb(transportInfo)
                  .then(res => {
                    this.getList();
                  })
                  .catch(err => {

                  });
              }
            })
            .catch(err => {
              this.msgError('存储异常 ' + err);
            });

        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消定位'
          });
        });
    },
    /**
     * @param {Object} row开始配送
     */
    startTransport(row) {
      const transportArray = [];
      const id = new this.$snowFlakeId().generate();
      transportArray.push(id);
      transportArray.push(id);
      transportArray.push(this.$store.getters.name);
      transportArray.push(this.$store.getters.nickName);
      transportArray.push(this.$store.getters.phonenumber);
      transportArray.push(this.$store.getters.deptName);
      console.log(formatDate(new Date()))
      transportArray.push(formatDate(new Date()));
      transportArray.push(this.city);
      transportArray.push(row.cropsId);
      transportArray.push('始发地');
      this.$confirm('是否开始运送货物', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          console.log(transportArray)
          this.$httpBlock
            .post(this.$httpUrl + '/driverapi/createTransport', { transportArray: transportArray })
            .then(res => {
              if (res.status === 200) {
                this.msgSuccess('数据上链成功');
                this.growDialog = false;
                const transportInfo = {
                  lng: this.center.lng,
                  lat: this.center.lat,
                  cropsId: row.cropsId,
                  id: row.id,
                  status: 1,
                };
                saveAndUpdateTransportInfoToDb(transportInfo)
                  .then(res => {

                    this.getList();
                  })
                  .catch(err => {

                  });
              }
            })
            .catch(err => {
              this.msgError('存储异常 ' + err);
            });
          this.$message({
            type: 'success',
            message: '开始运送!'
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消运送'
          });
        });
    },

    getList() {
      listTransport(this.$store.getters.name).then(res => {
        this.transportList = res.data;
      });
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      };
    },
    // 字典状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        deptId: undefined,
        parentId: undefined,
        deptName: undefined,
        orderNum: undefined,
        leader: undefined,
        phone: undefined,
        email: undefined,
        status: '0'
      };
      this.resetForm('form');
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm');
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset();
      if (row != undefined) {
        this.form.parentId = row.deptId;
      }
      this.open = true;
      this.title = '添加部门';
      listDept().then(response => {
        this.deptOptions = this.handleTree(response.data, 'deptId');
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      getDept(row.deptId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = '修改部门';
      });
      listDeptExcludeChild(row.deptId).then(response => {
        this.deptOptions = this.handleTree(response.data, 'deptId');
      });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.deptId != undefined) {
            updateDept(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess('修改成功');
                this.open = false;
                this.getList();
              }
            });
          } else {
            addDept(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess('新增成功');
                this.open = false;
                this.getList();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认删除名称为"' + row.deptName + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(function() {
          return delDept(row.deptId);
        })
        .then(() => {
          this.getList();
          this.msgSuccess('删除成功');
        })
        .catch(function() {});
    }
  }
};
</script>
<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>
